<template>
<div class="app-container calendar-list-container">
  <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

    <el-table-column type="expand">
      <template slot-scope="props">
        <div style="display:flex">

          <div style="flex: 1">
            <img :src="props.row.imageUrl"  preview="0" style="border: #f0f0f0 solid 1px ;width:150px;height:150px"  alt="">
          </div>
          <div style="flex: 5">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="门店名称">
                    <span>{{props.row.name}}</span>
                  </el-form-item>
                  <el-form-item label="老板姓名">
                    <span>{{props.row.shopkeeper}}</span>
                  </el-form-item>
                  <el-form-item label="老板籍贯">
                    <span>{{props.row.bornFrom}}</span>
                  </el-form-item>
                  <el-form-item label="联系方式">
                    <span>{{props.row.phone}}</span>
                  </el-form-item>
                  <el-form-item label="从业时间(年)">
                    <span>{{props.row.years}}</span>
                  </el-form-item>
                  <el-form-item label="月均收入(万)">
                    <span>{{props.row.incomePerMonth}}</span>
                  </el-form-item>
                  <el-form-item label="经营品牌">
                    <span>{{props.row.brand }}</span>
                  </el-form-item>
                  <el-form-item label="自带机器">
                    <span>{{props.row.zdMachine ?'是':'否'}}</span>
                  </el-form-item>
                  <el-form-item label="自带厂房">
                    <span>{{props.row.hasWorkShop ?'是':'否'}}</span>
                  </el-form-item>
                  <el-form-item label="自带货车">
                    <span>{{props.row.zdTran ?'是':'否'}}</span>
                  </el-form-item>
                </el-form>
          </div>
        </div>
      </template>
    </el-table-column>


    <el-table-column align="center" label="序号" width="65"> <template scope="scope">
          <span>{{scope.row.id}}</span>
        </template> </el-table-column>
    <el-table-column width="200" align="center" label="店名"> <template scope="scope">
        <span>{{scope.row.name}}</span>
      </template> </el-table-column>
    <el-table-column width="110" align="center" label="店主"> <template scope="scope">
            <span>{{scope.row.shopkeeper}}</span>
          </template> </el-table-column>
    <el-table-column width="110" align="center" label="手机号"> <template scope="scope">
            <span>{{scope.row.phone}}</span>
          </template> </el-table-column>
    <el-table-column width="300" align="center" label="地址"> <template scope="scope">
      <span>{{scope.row.dtlAddress}}</span>
    </template> </el-table-column>
    
    <el-table-column align="center" label="操作" width="240"> <template scope="scope">
        <el-button   size="small" type="success" @click="handleUpdate(scope.row)">通过
        </el-button>
        <el-button   size="small" type="danger" @click="handleDelete(scope.row)">拒绝
        </el-button>
      </template> </el-table-column>
  </el-table>
  <div v-show="!listLoading" class="pagination-container">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
  </div>
  <el-dialog title="拒绝通过" :visible.sync="dialogFormVisible">
  <el-form>
    <el-form-item label="拒绝原因" :label-width="formLabelWidth">
      <el-input v-model="reason" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="refuseAction">确 定</el-button>
  </div>
</el-dialog>
</div>
</template>


<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 100px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33%;
}
</style>


<script>
import { approve, shopWaittingList, refuse } from "@/api/shop/index";
import { mapGetters } from "vuex";
export default {
  name: "user",
  data() {
    return {
      shop:{},
      reason: "",
      formLabelWidth: "120px",
      dialogFormVisible: false,
      form: {
        username: undefined,
        name: undefined,
        sex: "男",
        password: undefined,
        description: undefined
      },
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        keyword: "",
        pageNo: 1,
        pageSize: 20
      },
      dialogFormVisible: false,
      tableKey: 0
    };
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters(["elements"])
  },
  methods: {
    refuseAction() {
      this.dialogFormVisible = false
      var  param = {
        id: this.shop.id,
        reason: this.reason
      }
       refuse(param).then(resp => {
          this.$notify({
            title: "成功",
            message: resp.message,
            type: "success",
            duration: 2000
          });
          this.getList()
        });
    },
    getList() {
      this.listLoading = false;
      shopWaittingList(this.listQuery).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val;
      this.getList();
    },
    handleUpdate(row) {
      this.$confirm("确认审核通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        approve(row.id).then(resp => {
          this.$notify({
            title: "成功",
            message: resp.message,
            type: "success",
            duration: 2000
          });
          this.getList()
        });
      });
    },
    handleDelete(row) {
      this.shop = row
      this.dialogFormVisible = !this.dialogFormVisible;
      this.reason = ''
    }
  }
};
</script>
